<template>
  <div class="row">

    <div class="col-md-12">
      <el-form class="el-form-col" :model="model" label-position="left" ref="elForm" label-width="110px">
        <Portlet>
          <div class="row">

            <div class="col-md-4">
              <el-form-item label="产品编号" prop="warehouseId" :rules="[
                    {required: true, message: '产品编号必须', trigger: 'blur'}
                  ]">
                <el-input v-model="model.warehouseId"></el-input>
              </el-form-item>
            </div>

            <div class="col-md-4">
              <el-form-item label="产品名称" prop="warehouseId" :rules="[
                    {required: true, message: '产品名称必须', trigger: 'blur'}
                  ]">
                <el-input v-model="model.warehouseId"></el-input>
              </el-form-item>
            </div>

            <div class="col-md-4">
              <el-form-item label="[厂家名称]" prop="warehouseId" :rules="[
                    {required: true, message: '厂家名称必须', trigger: 'blur'}
                  ]">
                <el-select v-model="model.name">
                  <el-option value="1" label="1"></el-option>
                  <el-option value="2" label="2"></el-option>
                </el-select>
              </el-form-item>
            </div>

            <div class="col-md-4">
              <el-form-item label="规格" prop="warehouseId" :rules="[
                    {required: true, message: '规格必须', trigger: 'blur'}
                  ]">
                <el-input v-model="model.warehouseId"></el-input>
              </el-form-item>
            </div>

            <div class="col-md-4">
              <el-form-item label="自定义属性" prop="warehouseId">
                <el-input v-model="model.warehouseId"></el-input>
              </el-form-item>
            </div>

            <div class="col-md-4">
              <el-form-item label="单位[字典]" prop="warehouseId" :rules="[
                    {required: true, message: '单位必须', trigger: 'blur'}
                  ]">
                <el-select v-model="model.name">
                  <el-option value="1" label="件"></el-option>
                  <el-option value="2" label="张"></el-option>
                  <el-option value="2" label="把"></el-option>
                </el-select>
              </el-form-item>
            </div>

            <div class="col-md-4">
              <el-form-item label="风格" prop="warehouseId">
                <el-input v-model="model.warehouseId"></el-input>
              </el-form-item>
            </div>

            <div class="col-md-4">
              <el-form-item label="颜色" prop="warehouseId">
                <el-input v-model="model.warehouseId"></el-input>
              </el-form-item>
            </div>

            <div class="col-md-4">
              <el-form-item label="单位[字典]" prop="warehouseId" :rules="[
                    {required: true, message: '单位必须', trigger: 'blur'}
                  ]">
                <el-select v-model="model.name">
                  <el-option value="1" label="板式"></el-option>
                  <el-option value="2" label="软体"></el-option>
                  <el-option value="3" label="沙发"></el-option>
                  <el-option value="4" label="易碎品"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </Portlet>

        <Portlet title="包件信息">
          包件信息
        </Portlet>

        <Portlet>
          <div class="row">
            <div class="col-xs-4 col-xs-offset-4">
              <el-button :loading="loading" class="btn-block" @click.prevent="submit" type="primary">
                {{ id ? '保存' : '新增'}}
              </el-button>
            </div>
          </div>
        </Portlet>
      </el-form>
    </div>
  </div>
</template>
<script>

import {copy, dotData, alert, confirm} from '@/utils'
import {httpSuccessPost, httpGetResponse} from '@/utils/ajax'
import {filterDataBaseDictionary} from '@/filters'
import {isFormatNumber, isPhone} from '@/utils/validate'

export default {
  filters: {
    filterDataBaseDictionary
  },
  data() {
    return {
      id: this.$route.params.id,
      routeName: this.$route.name,
      loading: false,
      model: {}
    }
  },
  created() {
    if (this.id) {
      httpGetResponse('/ms-warehouse-order/recordOrder/orderDetailBean', {id: this.id}).then(response => {
        const success = dotData(response, 'success')
        console.log(response, success)
      })
    }
  },
  methods: {
    isFormatNumber,
    isPhone,
    httpPost(url) {
      let data = copy(this.model, true)
      return httpSuccessPost(url, data).then(response => {
        return response
      })
    },
    submit() {
      this.$refs.elForm.validate(result => {
        if (!result) {
          alert('验证未通过')
          return
        }
        this.loading = true
        let title = this.id ? '编辑成功' : '新增成功'
        let url = 'create'
        this.httpPost(url).then(response => {
          const success = dotData(response, 'success')
          if (success) {
            confirm(title, title, {
              type: 'success',
              showCancelButton: false,
              closeOnClickModal: false
            }).then(_ => {
              if (this.id) {
                if (this.routeName === 'orderEdit') { // 详情的编辑
                  this.$router.push({path: '/ss-oms/enterWarehouse/warehousing-order/show/' + this.id})
                } else if (this.routeName === 'orderTempShow') { // 暂存单转正
                  this.$router.push({path: '/ss-oms/order/temp'})
                }
              } else {
                this.resetFields()
              }
            }).finally(_ => {
              this.loading = false
            })
          } else {
            this.loading = false
          }
        }).catch(_ => {
          this.loading = false
        })
      })
    },
    // 清空表格
    resetFields() {
      try {
        this.$refs.elForm.resetFields()
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
